Help:Coding
__NOEDITSECTION__ 'Introduction' Hey, this is a guide to learn the basics of HTML and CSS coding, in which after you can branch out and learn things on your own!! Here are some links for you to check out. On Wiki * This page has a list of patterns and instructions for their use. * The Free Formats page has pre-coded formats available for your use, just be sure to credit the person who made them! Off Wiki * ColorHexa is a very good resource for finding colors to use in your code. * MDN is a comprehensive guide and reference for the use of HTML and CSS. ** HTML reference, CSS reference, HTML guide, CSS guide * W3Schools is another reference and guide site, and while it is presented in a more beginner friendly format, it isn't as useful as MDN. ** HTML reference, CSS reference, HTML guide, CSS guide, 'Source Mode' You have to be in the source editing mode to code pages! Here's how to switch to using it. # Mouse over or click the little arrow next to your profile picture. A dropdown menu should appear. Click "My Preferences". # Once in your preferences, you should see a series of tabs. Click the "Editing" tab. # Under the "Editing" tab, the first section you will see is called "Editing Experience". You should see a dropdown arrow. # Click the arrow, and you should see three options: VisualEditor, Classic rich-text editor, and Source editor. Choose Classic rich-text editor or Source editor, depending on how competent you're feeling. To code using the Classic rich-text editor you'll need click the "source" button when editing a page. # Scroll down to the bottom and click the "Save" button. # You are now using the source editor! 'Basic HTML Tags' Basic HTML tags to get you started. Check out for more. text creates italic text, like this: Sunny is a hybrid. text creates bold text, like this: Clay likes watermelon. text creates a line through your text, like this: Starflight the NightWing text creates an underline, like this: Tsunami the SeaWing princess. text creates larger text, like this: Wings of Fire is a great series! text creates smaller text, like this: Wings of Fire is amazing! 'Wikitext' Wikitext is what the editor uses when you click the bold or italic button. Check out for more. text creates italic text, like this: Sunny is a hybrid. text creates bold text, like this: Clay likes watermelon. text creates bold and italic text, like this: Clay likes watermelon. 'Obsolete Tags' A list of commonly used elements (tags) that are obsolete and should not be used. These tags are obsolete. Although they may still work in some browsers, their use is discouraged since they could be removed at any time. Try to avoid using them. * ‐ A tag that uses the font-size: property should be used instead. * ‐ A or a tag that uses the text-align: center; property should be used instead. * ‐ A or a tag that uses the style="" attribute should be used instead. * ‐ The tag should be used instead. * ‐ In most use cases the tag should replace the tag. 'Background Setup' While we won't be covering the very basics here, both MDN and W3Schools have tutorials and guides that you can check out. We'll start with a basic background, and I'll explain each individual property in the order they appear in this example. Example background code text content goes here 'Background' Background syntax is background: color | gradient;. * Color is a single solid or transparent color that fills the entire element. It is usually specified with a hex code, although any way of showing color can be used. * Gradient is either a linear or a radial gradient, and can be solid or transparent. Like Color, it fills the entire element. It is usually specified with a hex or rgb code, although any way of showing color can be used. The first part we see is the background. background: is short-hand for background-color:, background-image:, and background-size:. a solid color, a gradient, or a pattern. "Patterns" are a combination of gradients. Example pattern code : 1. Basic solid color background Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. : 2. Simple gradient background Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. : 3. "Fire Stripes" pattern from the Helio Wiki Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 'Border' Border syntax is border: width | style | color;. * Width is how wide the border is, and is typically specified by pixels (px). For example, border: 5px; would be a 5px wide border. * Style is what the border looks like, and examples are shown below. * Color is, rather obviously, the color of the border. You can use a name, a hex code, an RGB code, and so on. There are several different border styles. Examples are shown below, and each one has a width of 5px, and a color of #f00. DASHED DOTTED DOUBLE GROOVE INSET OUTSET RIDGE SOLID Example Border code Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 'Border-Radius' Border-radius syntax is border-radius: radius;. * Radius is how curved the outside edge is, and is usually specified with pixels (px). The border-radius: property is used to round the corners of an element's outer edge. You can use it even if you aren't using border:. Example Border-Radius code Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 'Color' Color syntax is color: color;. * color can, like with borders, be a name, a hex code, an RGB code, and so on. color: is only for setting the text color. Example Color code Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 'Padding' Padding syntax is padding: number;. * Number is usually specified with pixels (px). A minimum of about 6px is recommended for easy reading. Padding is for creating extra space within an element. In contrast, margin creates extra space around an element. While padding: is certainly not required, you should use it so the text is more easily read. An example with padding: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. An example without padding: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 'Foreground/Midground Setup' This is for the coding that goes "inside" the background coding. This section is identical to that of the previously explained coding, except that it goes inside. 'Margin' Margin syntax is margin: number;. * Number is usually specified with pixels (px). Margins create extra space around an element. In contrast, padding creates extra space within an element. An example with margins: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur. An example without margins: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur. 'Explaining Colors' In this section we'll explain what the ways of showing colors are, and how to change the color of existing patterns. 'Color Codes' What are hex, rgb, and hsl codes? They're ways of telling the browser what color to use! * Hex codes are six digit codes, or 3 sets of 2 numbers that combine red, green, and blue. The first value pair refers to red, the second to green and the third to blue, with values ranging from 0 to FF (#RRGGBB). Pure white is #ffffff, and pure black is #000000. * Hex codes are made up of 3 sets of 2 numbers. Each set stands for a color, the first 2 numbers are for red, the second 2 stand for green, and the last 2 stand blue (#RRGGBB). * RGB stands for "Red, Green, Blue" and is used by typing rgb(###,###,###). RGB uses 3 sets of numbers anywhere from 0 to 255, and each set is separated by commas. Like hex codes the first set is the amount of red, the second set the amount of green, and the third is the amount of blue. Pure white is rgb(255,255,255), and pure black is rgb(0,0,0). * HSL stands for "Hue, Saturation, Luminosity" and is used by typing hsl(###,###%,###%). HSL uses 3 sets of numbers that can be 1 to 3 digits long, with each set of numbers separated by commas, and the last 2 values end in a percent sign. The first set of numbers is the hue, the second set is the saturation, and the third is the luminosity. The first number can be anywhere from 0 to 360, and the last 2 can by anywhere from 0 to 100. Pure white is hsl(0,0%,100%), and pure black is hsl(0,0%,0%). All three ways of showing colors also support transparency. * Hex codes - With hex codes, transparency is shown by adding two numbers to the end of the code. For example, #ffffff00 is white, but completely transparent. So, hex codes with transparency are 8 digits long, with 4 sets of 2 numbers. While it may seem like a good idea to use these over RGBA or HSLA, transparent hex codes are still poorly supported (see here for more info) and they are also poorly documented. So there isn't a real benefit to using it over RGBA or HSLA, besides saving space. * RGBA codes - You probably noticed that this code is quite similar to one of the previously mentioned formats. RGBA stands for "Red, Green, Blue, Alpha". Whereas RBG looked like rgb(###,###,###) when being used, RGBA looks like rgba(###,###,###,.##). The last number is the transparency, and while formally it should be 0.## it can be shortened to just .##. * HSLA codes - Similar to RGBA codes, HSLA codes are identical to HSL codes in everything except that they support alpha. HSLA stands for "Hue, Saturation, Luminosity, Alpha". HSLA codes look like hsla(###,##%,##%,.##). Just like RGBA codes, HSLA codes technically should have a 0 before the decimal, although it can be dropped. Notes on RGBA and HSLA In addition to RGBA and HSLA codes technically having a 0 before the decimal, they are also supposed to have a space after each comma. This is often dropped, and is not required. This applies to RGB codes and HSL codes as well. In addition to being able to specify transparency between .01 and .99, you can also use a 1 or a 0 with RGBA and HSLA codes. Setting the number to 1 is effectively dropping the alpha channel entirely and setting it to 0 is making the color fully transparent. Numerous sites for finding and choosing colors are available, but the ones I've found to be most useful are hslpicker, a no-nonsense, easy to use color picker that allows you to pick Hex, RGBA, and HSLA codes and ColorHexa, a more in depth color picking tool that shows, in addition to everything hslpicker shows, shades, tints, and tones of the color you choose, along with visually similar colors. 'Patterns' Patterns are a combination of color codes, using the linear-gradient and radial-gradient CSS properties. A guide to simple gradients can be found here. It's quite easy to remix an existing pattern, just change the Hex, RGB(A), or HSL(A) codes to what you want them to be! As cool as patterns are, you don't have to use one. You can use background-color: to set a solid color, or you can use linear-gradient and radial-gradient to make a simple gradient. 'Extras' Some bits of custom coding for you to use. Head over to hear to see more! 'Custom Infobox' 'Quotes' 'Magic Words' These are the most commonly used ones, but there are tons more located at . They should be placed at the very top of the page, with the exception of TOC To remove the Table of Contents, use To add the Table of Contents in a certain area, use __TOC__ To remove the Edit Sections, use __NOEDITSECTION__ To force the page to only edit in source mode, use __NOWYSIWYG__ 'Finishing up' Now that you know the basics, get out there and start coding! If you're unsure about what to do, Heliosanctus's Testing Wiki (often referred to as the testing wiki or the helio wiki) is a great place to ask questions and test out your code before it's actually ready.